<template>
<div>
    <el-row type="flex" justify="left" v-loading.fullscreen.lock="loading">
        <el-form label-width="70px" label-position="right" style="">
            <el-form-item label="输入标题">
                <el-input v-model="Question.title" type="textarea" :rows="3" placeholder="请输入内容">
                </el-input>
            </el-form-item>
            <el-form-item label="问题封面">
                <el-upload class="upload-demo" multiple :http-request="imageChange" action="/" list-type="picture-card" :on-preview="handlePictureCardPreview">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
                <!--图片预览-->
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="coverUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="问题标签">
                <el-select v-model="tagList" multiple placeholder="请选择">
                    <el-option v-for="item in allTags" :key="item.id" :label="item.tagname" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="问题描述">
                <el-input v-model="Question.description" type="textarea" :rows="5" placeholder="输入问题描述">
                </el-input>
            </el-form-item>
            <el-form-item label="问题内容">
                <!--                富文本编辑器-->
                <mavon-editor @save="saveDoc" @change="updateDoc" ref="editor" v-model="doc" @imgAdd="handleEditorImgAdd">
                </mavon-editor>
            </el-form-item>
            <el-form-item label="操作">
                <el-button type="primary" @click="publish">提问</el-button>
            </el-form-item>
        </el-form>
    </el-row>
</div>
</template>

<script>
import {
    mavonEditor
} from "mavon-editor";
import "mavon-editor/dist/css/index.css";
import {
    fetchAllTags
} from "../api";
import {
    publishQuestion
} from "../api";
import {
    linkTagAndQuestion
} from "../api";
import storage from "../model/storage";

export default {

    name: "question",
    data() {
        return {
            loading: false,
            //问题信息
            Question: {
                //文章标题
                title: '',
                //文章描述
                description: '',
                //文章作者
                author: 'xiong',
                //作者ID
                uid: 1,
                //文章内容
                content: '',
                //html的content
                contentFormat: '',
                //封面？
                coverUrl: '',
            },
            coverUrl: '',
            dialogVisible: false,
            //问题的标签
            questionTags: {

            },
            //已经选择的标签列表(存的是标签的ID数组)
            tagList: [],
            //可以选择的标签列表
            allTags: [{
                id: '',
                tagname: ''
            }],
            doc: ''
        }
    },
    methods: {
        handleEditorImgAdd(pos, $file) {
            let formData = new FormData()
            formData.append('file', param.file)
            axios.post('http://localhost:8080/upload/postImage/', formData).then(res => {
                console.log(res);
                if (res.data.code == 200) {
                    let url = res.data.url
                    let name = $file.name
                    if (name.includes('-')) {
                        name = name.replace(/-/g, '')
                    }
                }
            });
        },
        handlePictureCardPreview(file) {
            this.dialogVisible = true;
        },
        // 提交图片
        imageChange(param, type) {
            // console.log(param);
            let formData = new FormData()
            formData.append('file', param.file)
            this.imgFile[pos] = $file
            // formData.append("upload", 'upload')
            axios.post('http://localhost:8080/upload/postImage/', formData).then(res => {
                console.log(res);
                if (res.data.code == 200) {
                    this.Question.coverUrl = res.data.url;
                }
            });
            // console.log(this.imgList);
        },
        saveDoc(markdown, html) {

        },
        updateDoc(markdown, html) {
            this.Question.content = markdown;
            this.Question.contentFormat = html;
        },
        //发布问题，返回主键，根据返回的主键插入选择的标签到数据库。
        publish() {
            this.loading = true;

            publishQuestion(this.Question).then(result => {
                //拿到问题的ID,将问题对应的标签插入

                linkTagAndQuestion(this.tagList, result.data.qid).then(result1 => {
                    if (result1.data.code == 200) {
                        this.loading = false;
                        this.$message.success("问题发布成功");
                        //跳转到主页
                        this.$router.push("/")
                    } else {
                        this.$message.error("请求超时")
                    }
                })

            })

        }

    },
    mounted() {
        //设置问题发布的作者
        this.Question.uid = storage.get("uid");
        this.Question.author = storage.get("username");

        //拿到所有的标签
        fetchAllTags().then(result => {
            this.allTags = result.data.data.records;
            console.log(this.allTags)
        })
    },
    components: {
        mavonEditor
    },

}
</script>

<style scoped>
.el-form-item {
    width: 800px;
}
</style>
